<template>
  <view>
    <!-- <tui-skeleton v-if="skeletonShow" :isLoading="false" backgroundColor="#fafafa" borderRadius="10rpx"></tui-skeleton> -->
    <!--header-->
    <tui-navigation-bar splitLine @init="initNavigation" @change="opcityChange" :scrollTop="scrollTop" title="我的" backgroundColor="255,255,255" color="#333">
      <view class="tui-header-box" :style="{marginTop:top+'px'}">
      </view>
    </tui-navigation-bar>
    <!--header-->
    <view class="tui-mybg-box">
      <image :src="webURL+'/static/images/mall/my/img_bg_3x.png'" class="tui-my-bg" mode="widthFix"></image>
      <view class="tui-header-center">
        <button @click="getUserProfile">
          <image :src="USER.face" class="tui-avatar tui-skeleton-circular"></image>
        </button>
        <!-- <button @click="toLogin" class="tui-info"> -->
        <view class="tui-info">
          <view class="tui-nickname tui-skeleton-fillet">{{ USER.username }}
            <image src="https://cwmall.oss-cn-shanghai.aliyuncs.com/mp-icon/icon_vip_3x.png" class="tui-img-vip"></image>
          </view>
          <view class="tui-explain">{{ USER.signature }}</view>
        </view>
        <!-- </button> -->

        <!-- #ifndef MP -->
        <!-- 				<view class="tui-btn-edit">
					<tui-button type="white" :plain="true" shape="circle" width="92rpx" height="40rpx" :size="22" @click="href(3)">编辑</tui-button>
				</view> -->
        <!-- #endif -->

        <!-- #ifdef MP -->
        <view class="tui-set-box" v-if="false">
          <view class="tui-icon-box tui-icon-message" @tap="href(1)">
            <tui-icon name="message" color="#fff" :size="26"></tui-icon>
            <!-- <view class="tui-badge tui-badge-white">1</view> -->
          </view>
          <view class="tui-icon-box tui-icon-setup" @tap="href(2)">
            <tui-icon name="setup" color="#fff" :size="26"></tui-icon>
          </view>
        </view>
        <!-- #endif -->
      </view>
      <view class="tui-header-btm" v-if="false">
        <view class="tui-btm-item">
          <view class="tui-btm-num">0</view>
          <view class="tui-btm-text tui-skeleton-fillet">收藏夹</view>
        </view>
        <view class="tui-btm-item">
          <view class="tui-btm-num">0</view>
          <view class="tui-btm-text tui-skeleton-fillet">店铺关注</view>
        </view>
        <view class="tui-btm-item">
          <view class="tui-btm-num">0</view>
          <view class="tui-btm-text tui-skeleton-fillet">喜欢的内容</view>
        </view>
        <view class="tui-btm-item" @tap="href(8)">
          <view class="tui-btm-num">{{coupons}}</view>
          <view class="tui-btm-text tui-skeleton-fillet">优惠券</view>
        </view>
      </view>
    </view>
    <view class="tui-content-box">
      <view class="tui-box tui-order-box tui-skeleton-fillet">
        <tui-list-cell :arrow="true" padding="0" :lineLeft="false" @click="toOrderList(null)">
          <view class="tui-cell-header">
            <view class="tui-cell-title">我的订单</view>
            <view class="tui-cell-sub">查看全部订单</view>
          </view>
        </tui-list-cell>
        <view class="tui-order-list">
          <button @click="toOrderList(1)" class="tui-order-item">
            <view class="tui-icon-box">
              <image src="https://cwmall.oss-cn-shanghai.aliyuncs.com/mp-icon/icon_daifukuan_3x.png" class="tui-order-icon"></image>
              <view class="tui-badge tui-badge-red" v-if="orderCounts[0]">{{orderCounts[0]}}</view>
            </view>
            <view class="tui-order-text">待付款</view>
          </button>
          <button @click="toOrderList(3)" class="tui-order-item">
            <view class="tui-icon-box">
              <image src="https://cwmall.oss-cn-shanghai.aliyuncs.com/mp-icon/icon_daifahuo_3x.png" class="tui-order-icon"></image>
              <!-- <view class="tui-badge tui-badge-red">1</view> -->
              <view class="tui-badge tui-badge-red" v-if="orderCounts[1]">{{orderCounts[1]}}</view>
            </view>
            <view class="tui-order-text">待发货</view>
          </button>
          <button @click="toOrderList('4,5,6')" class="tui-order-item">
            <view class="tui-icon-box">
              <image src="https://cwmall.oss-cn-shanghai.aliyuncs.com/mp-icon/icon_daishouhuo_3x.png" class="tui-order-icon"></image>
              <view class="tui-badge tui-badge-red" v-if="orderCounts[2]">{{orderCounts[2]}}</view>
            </view>
            <view class="tui-order-text">待收货</view>
          </button>
          <button @click="toOrderList(9)" class="tui-order-item">
            <view class="tui-icon-box">
              <image src="https://cwmall.oss-cn-shanghai.aliyuncs.com/mp-icon/icon_pingjia_3x.png" class="tui-order-icon"></image>
              <view class="tui-badge tui-badge-red" v-if="orderCounts[3]">{{orderCounts[3]}}</view>
            </view>
            <view class="tui-order-text">待评价</view>
          </button>
          <button @click="toOrderList('7,8')" class="tui-order-item">
            <view class="tui-icon-box">
              <image src="https://cwmall.oss-cn-shanghai.aliyuncs.com/mp-icon/icon_tuikuan_3x.png" class="tui-order-icon"></image>
              <view class="tui-badge tui-badge-red" v-if="orderCounts[4]">{{orderCounts[4]}}</view>
            </view>
            <view class="tui-order-text">退款/售后</view>
          </button>
        </view>
      </view>

      <view class="tui-box tui-tool-box">
        <tui-list-cell padding="0" :arrow="true" @tap="href(9, true)">
          <view class="tool-item">
            <view class="tool-item-icon">
              <image src="https://cwmall.oss-cn-shanghai.aliyuncs.com/mp-icon/gift.png" class="icon-image"></image>
            </view>
            <view class="tool-item-title">我的优惠券</view>
          </view>
        </tui-list-cell>
        <tui-list-cell padding="0" :arrow="true" @tap="href(10, true)">
          <view class="tool-item">
            <view class="tool-item-icon">
              <image src="https://cwmall.oss-cn-shanghai.aliyuncs.com/mp-icon/landtransportation.png" class="icon-image"></image>
            </view>
            <view class="tool-item-title">常用地址管理</view>
          </view>
        </tui-list-cell>
        <tui-list-cell padding="0" :arrow="true">
          <button open-type="contact" :session-from="config.merchantId">
            <view class="tool-item">
              <view class="tool-item-icon">
                <image src="https://cwmall.oss-cn-shanghai.aliyuncs.com/mp-icon/service.png" class="icon-image"></image>
              </view>
              <view class="tool-item-title">商城在线客服</view>
            </view>
          </button>
        </tui-list-cell>
      </view>

      <!-- 			<view class="tui-box tui-assets-box">
				<tui-list-cell padding="0" unlined :hover="false">
					<view class="tui-cell-header">
						<view class="tui-cell-title">我的资产</view>
					</view>
				</tui-list-cell>
				<view class="tui-order-list tui-assets-list">
					<view class="tui-order-item" @tap="href(8)">
						<view class="tui-assets-num">
							<text>3</text>
							<view class="tui-badge-dot"></view>
						</view>
						<view class="tui-assets-text">优惠券</view>
					</view>
					<view class="tui-order-item">
						<view class="tui-assets-num">
							<text>7</text>
							<view class="tui-badge-dot"></view>
						</view>
						<view class="tui-assets-text">积分</view>
					</view>
					<view class="tui-order-item">
						<view class="tui-assets-num">
							<text>0</text>
						</view>
						<view class="tui-assets-text">红包</view>
					</view>
					<view class="tui-order-item">
						<view class="tui-assets-num">
							<text>1</text>
						</view>
						<view class="tui-assets-text">礼品卡</view>
					</view>
					<view class="tui-order-item">
						<view class="tui-assets-num">
							<text>20</text>
						</view>
						<view class="tui-assets-text">津贴</view>
					</view>
				</view>
			</view> -->

      <!--view class="tui-box tui-tool-box">
				<tui-list-cell :arrow="true" padding="0" :lineLeft="false">
					<view class="tui-cell-header">
						<view class="tui-cell-title">常用工具</view>
						<view class="tui-cell-sub">查看更多</view>
					</view>
				</tui-list-cell>
				<view @click="HANDLE_SORRY" class="tui-order-list tui-flex-wrap">
					<view class="tui-tool-item">
						<view class="tui-icon-box">
							<image src="https://cwmall.oss-cn-shanghai.aliyuncs.com/mp-icon/icon_gift_3x.png" class="tui-tool-icon"></image>
							<image src="https://cwmall.oss-cn-shanghai.aliyuncs.com/mp-icon/icon_tab_3x.png" class="tui-badge-icon"></image>
						</view>
						<view class="tui-tool-text">免费领好礼</view>
					</view>
					<view class="tui-tool-item">
						<view class="tui-icon-box">
							<image src="https://cwmall.oss-cn-shanghai.aliyuncs.com/mp-icon/icon_purse_3x.png" class="tui-tool-icon"></image>
						</view>
						<view class="tui-tool-text">钱包</view>
					</view>
					<view class="tui-tool-item">
						<view class="tui-icon-box">
							<image src="https://cwmall.oss-cn-shanghai.aliyuncs.com/mp-icon/icon_ticket_3x.png" class="tui-tool-icon"></image>
						</view>
						<view class="tui-tool-text">领券中心</view>
					</view>
					<view class="tui-tool-item">
						<view class="tui-icon-box">
							<image src="https://cwmall.oss-cn-shanghai.aliyuncs.com/mp-icon/icon_kefu_3x.png" class="tui-tool-icon"></image>
						</view>
						<view class="tui-tool-text">客服服务</view>
					</view>
					<view class="tui-tool-item">
						<view class="tui-icon-box">
							<image src="https://cwmall.oss-cn-shanghai.aliyuncs.com/mp-icon/icon_fanxian_3x.png" class="tui-tool-icon"></image>
						</view>
						<view class="tui-tool-text">每日返现</view>
					</view>
					<view class="tui-tool-item">
						<view class="tui-icon-box">
							<image src="https://cwmall.oss-cn-shanghai.aliyuncs.com/mp-icon/icon_tuan_3x.png" class="tui-tool-icon"></image>
						</view>
						<view class="tui-tool-text">超值拼团</view>
					</view>
					<view class="tui-tool-item">
						<view class="tui-icon-box">
							<image src="/static/images/mall/my/icon_zhihuan_3x.png" class="tui-tool-icon"></image>
						</view>
						<view class="tui-tool-text">闲置换钱</view>
					</view>
					<view class="tui-tool-item">
						<view class="tui-icon-box">
							<image src="https://cwmall.oss-cn-shanghai.aliyuncs.com/mp-icon/icon_kaipiao_3x.png" class="tui-tool-icon"></image>
						</view>
						<view class="tui-tool-text">开发票</view>
					</view>
				</view>
			</view-->

      <!--为你推荐-->
      <tui-divider :size="28" :bold="true" color="#333" width="50%">为你推荐</tui-divider>
      <view class="tui-product-list">
        <view class="tui-product-container">
          <block v-for="(item, index) in PRODUCTS_LIST" :key="index" v-if="(index + 1) % 2 != 0">
            <!--商品列表-->
            <view class="tui-pro-item" hover-class="hover" :hover-start-time="150" @tap="GOODS_DETAIL(item)">
              <image :src="item.pic" class="tui-pro-img tui-skeleton-rect" mode="widthFix" />
              <view class="tui-pro-content">
                <view class="tui-pro-tit tui-skeleton-rect">{{ item.productName }}</view>
                <view>
                  <view class="tui-pro-price">
                    <text class="tui-sale-price tui-skeleton-rect">￥{{ item.soldPrice }}</text>
                    <text class="tui-factory-price tui-skeleton-rect">￥{{ item.price }}</text>
                  </view>
                  <view class="tui-pro-pay tui-skeleton-rect">{{ item.soldStock }}人付款</view>
                </view>
              </view>
            </view>
            <!--商品列表-->
            <!-- <template is="productItem" data="{{item,index:index}}" /> -->
          </block>
        </view>
        <view class="tui-product-container">
          <block v-for="(item, index) in PRODUCTS_LIST" :key="index" v-if="(index + 1) % 2 == 0">
            <!--商品列表-->
            <view class="tui-pro-item" hover-class="hover" :hover-start-time="150" @tap="GOODS_DETAIL(item)">
              <image :src="item.pic" class="tui-pro-img tui-skeleton-rect" mode="widthFix" />
              <view class="tui-pro-content">
                <view class="tui-pro-tit tui-skeleton-rect">{{ item.productName }}</view>
                <view>
                  <view class="tui-pro-price">
                    <text class="tui-sale-price tui-skeleton-rect">￥{{ item.soldPrice }}</text>
                    <text class="tui-factory-price tui-skeleton-rect">￥{{ item.price }}</text>
                  </view>
                  <view class="tui-pro-pay tui-skeleton-rect">{{ item.soldStock }}人付款</view>
                </view>
              </view>
            </view>
            <!--商品列表-->
            <!-- <template is="productItem" data="{{item,index:index}}" /> -->
          </block>
        </view>
      </view>
      <!-- <view class="tui-btn-back" @tap="back">返回</view> -->
      <!--加载loadding-->
      <tui-loadmore v-if="loadding" :index="3" type="red"></tui-loadmore>

      <!-- 联系客服 -->
      <!-- <tui-customer></tui-customer> -->

      <custom-tab-bar name='my'></custom-tab-bar>
    </view>
  </view>
</template>

<script>
import { PRODUCTS_LIST } from "../../mixin/PRODUCTS_LIST";
import { PRODUCTS_DETAIL } from "../../mixin/PRODUCTS_DETAIL";
import { JUST_ONSHOW } from '@/mixin/HOOKS.js';
import { mapState } from "vuex";
import CustomTabBar from "@/components/common/custom-tabbar/custom-tabbar.vue";
import config from "@/config/config.js";
export default {
  components: {
    CustomTabBar,
  },
  onLoad: function (options) {
    let obj = {};
    // #ifdef MP-WEIXIN
    obj = wx.getMenuButtonBoundingClientRect();
    // #endif
    // #ifdef MP-BAIDU
    obj = swan.getMenuButtonBoundingClientRect();
    // #endif
    // #ifdef MP-ALIPAY
    my.hideAddToDesktopMenu();
    // #endif

    uni.getSystemInfo({
      success: (res) => {
        this.width = obj.left || res.windowWidth;
        this.height = obj.top
          ? obj.top + obj.height + 8
          : res.statusBarHeight + 44;
        this.top = obj.top
          ? obj.top + (obj.height - 32) / 2
          : res.statusBarHeight + 6;
        this.scrollH = res.windowWidth * 0.6;
      },
    });
	
	this.GetProductListByHome((data) => {
	  setTimeout(() => {
	    this.skeletonShow = false;
	    this.PRODUCTS_LIST = [];
	    this.PRODUCTS_LIST = data;
	  }, 500);
	});
	if (this.isLogin) {
		// this.getCoupons();
		this.getOrderCount();
	}
  },
  mixins: [PRODUCTS_LIST, PRODUCTS_DETAIL, JUST_ONSHOW],
  data() {
    return {
      config,
      webURL: "https://www.thorui.cn/wx",
      top: 0, //标题图标距离顶部距离
      opcity: 0,
      scrollTop: 0.5,
      productList: [],
      pageIndex: 1,
      loadding: false,
      pullUpOn: true,
      skeletonShow: true,
      coupons: 0,
      // 数组中按索引 0: 待付款  1: 待发货  2:待收货  3:待评价  4: 退款/售后
      orderCounts: [0, 0, 0, 0, 0],
    };
  },
  methods: {
	CUSTOM_HOOK_SHOW() {
		if (this.isLogin) {
			// this.getCoupons();
			this.getOrderCount();
		}
	},
    href(page, needLogin = false) {
      let url = "";
      switch (page) {
        case 2:
          url = "/pagesB/set/set";
          break;
        case 3:
          url = "/pagesB/userInfo/userInfo";
          break;
        case 4:
          url = "/pagesB/myOrder/myOrder";
          break;
        case 6:
          url = "/pagesB/coupon/coupon";
          break;
        case 7:
          url = "/pagesB/message/message";
          break;
        case 8:
          url = "/pagesB/myCoupon/myCoupon";
          break;
        case 9:
          url = "/pagesB/myCoupon/myCoupon";
          break;
        case 10:
          url = "/pagesB/address/address";
        default:
          break;
      }
      if (url) {
		if (needLogin) {
			this.$store.dispatch("USER_LOGIN", {
				callBack: () => {
					uni.navigateTo({ url });
				}
			})
		} else {
			uni.navigateTo({ url });
		}
      } else {
        this.tui.toast("敬请期待~");
      }
    },
    detail: function () {
      uni.navigateTo({
        url: "/pagesB/productDetail/productDetail",
      });
    },
    initNavigation(e) {
      this.opcity = e.opcity;
      this.top = e.top;
    },
    async getCoupons() {
      const { customerId } = this.$store.state;
      if (customerId) {
        const { data, success } = await this.$api.GetMyCoupons(
          this.$config.merchantId,
          customerId
        );
        this.coupons = data.length || 0;
      }
    },
    async getOrderCount() {
      const { data, success } = await this.$api.GetOrderCounts();
	  const { data: cCounts } = await this.$api.GetCommentCounts();

      if (success) {
		// 待付款
		this.$set(this.orderCounts, 0, data.find(d => d.orderStatus === 1)?.orderCount || 0)
		// 待发货
		this.$set(this.orderCounts, 1, data.find(d => d.orderStatus === 3)?.orderCount || 0)
		// 待收货
		this.$set(
			this.orderCounts,
			2,
			data.filter(d => [4, 5, 6].includes(d.orderStatus)).reduce((total, cur) => {
				return total + cur.orderCount
			}, 0)
		)
		// 待评价
		this.$set(this.orderCounts, 3, cCounts || 0)
		// 退款/售后
		this.$set(
			this.orderCounts,
			4,
			data.filter(d => [7, 8].includes(d.orderStatus)).reduce((total, cur) => {
				return total + cur.orderCount
			}, 0)
		)
      }
    },
    opcityChange(e) {
      this.opcity = e.opcity;
    },
    back() {
      uni.navigateBack();
    },
    toOrderList(orderStatus) {
		this.$store.dispatch("USER_LOGIN", {
			desc: "用于登录时记录您的必要身份信息",
			callBack: () => {
				if (orderStatus !== 9) {
					uni.navigateTo({
					  url: `/pagesB/myOrder/myOrder${
					    orderStatus ? "?status=" + orderStatus : ""
					  }`,
					});
				} else {
					uni.navigateTo({
						url: '/pagesB/commentOrder/commentOrder'
					})
				}
			}
		})
    },
    getUserProfile(e) {
	  this.$store.dispatch("USER_LOGIN", {
		  callBack: () => {
			  this.href(3);
		  }
	  })
    },
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  onPullDownRefresh() {
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 200);
  },
  onReachBottom: function () {
    if (!this.pullUpOn) return;
    this.loadding = true;
    if (this.pageIndex == 4) {
      this.loadding = false;
      this.pullUpOn = false;
    } else {
      let loadData = JSON.parse(JSON.stringify(this.productList));
      loadData = loadData.splice(0, 10);
      if (this.pageIndex == 1) {
        loadData = loadData.reverse();
      }
      this.productList = this.productList.concat(loadData);
      this.pageIndex = this.pageIndex + 1;
      this.loadding = false;
    }
  },
  computed: {
    ...mapState({
      USER: (state) => state.USER,
    }),
	isLogin() {
		return this.$store.getters.isLogin
	},
    couponEnabel() {
      return this.$config.couponEnabel;
    },
  },
};
</script>

<style lang="scss">
.tui-header-box {
  width: 100%;
  padding: 0 30rpx 0 20rpx;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 32px;
  transform: translateZ(0);
  z-index: 9999;
}

/* #ifndef MP */
.tui-header-icon {
  min-width: 120rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* #endif */
/* #ifdef MP */
.tui-set-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* #endif */
.tui-icon-box {
  position: relative;
}

.tui-icon-setup {
  margin-left: 8rpx;
}

.tui-badge {
  position: absolute;
  font-size: 24rpx;
  height: 32rpx;
  min-width: 32rpx;
  padding: 0 6rpx;
  border-radius: 40rpx;
  right: 10rpx;
  top: -5rpx;
  transform: scale(0.8) translateX(60%);
  transform-origin: center center;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.tui-badge-red {
  background: #f74d54;
  color: #fff;
}

.tui-badge-white {
  background: #fff;
  color: #f74d54;
}

.tui-badge-dot {
  position: absolute;
  height: 12rpx;
  width: 12rpx;
  border-radius: 50%;
  right: -12rpx;
  top: 0;
  background: #f74d54;
}

.tui-mybg-box {
  width: 100%;
  height: 464rpx;
  position: relative;
}

.tui-my-bg {
  width: 100%;
  // height: 464rpx;
  height: 400rpx;
  display: block;
}

.tui-header-center {
  position: absolute;
  width: 100%;
  height: 128rpx;
  left: 0;
  top: 120rpx;
  padding: 0 30upx 0 50upx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.tui-avatar {
  flex-shrink: 0;
  width: 128rpx;
  height: 128rpx;
  display: block;
  border-radius: 1000upx;
}

.tui-info {
  width: 60%;
  padding-left: 30rpx;
}

.tui-nickname {
  font-size: 30rpx;
  font-weight: 500;
  color: #fff;
  display: flex;
  align-items: center;
}

.tui-img-vip {
  width: 56rpx;
  height: 24rpx;
  margin-left: 18rpx;
}

.tui-explain {
  width: 80%;
  font-size: 24rpx;
  font-weight: 400;
  color: #fff;
  opacity: 0.75;
  // padding-top: -8rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}

.tui-btn-edit {
  flex-shrink: 0;
  padding-right: 22rpx;
}

.tui-header-btm {
  width: 100%;
  padding: 0 30rpx;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 280rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fff;
}

.tui-btm-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tui-btm-num {
  font-size: 32rpx;
  font-weight: 600;
  position: relative;
}

.tui-btm-text {
  font-size: 24rpx;
  opacity: 0.85;
  padding-top: 4rpx;
}

.tui-content-box {
  width: 100%;
  padding: 0 20rpx;
  box-sizing: border-box;
  position: relative;
  top: -132rpx;
  z-index: 10;
}

.tui-box {
  width: 100%;
  background: #fff;
  box-shadow: 0 3rpx 20rpx rgba(183, 183, 183, 0.1);
  border-radius: 10rpx;
  overflow: hidden;
}

.tui-order-box {
  height: 208rpx;
}

.tui-cell-header {
  width: 100%;
  height: 74rpx;
  padding: 0 26rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tui-cell-title {
  font-size: 30rpx;
  line-height: 30rpx;
  font-weight: 600;
  color: #333;
}

.tui-cell-sub {
  font-size: 26rpx;
  font-weight: 400;
  color: #999;
  padding-right: 28rpx;
}

.tui-order-list {
  width: 100%;
  height: 134rpx;
  padding: 0 30rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tui-order-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4rpx 0 0;
}

.tui-order-text,
.tui-tool-text {
  font-size: 26rpx;
  font-weight: 400;
  color: #666;
  padding-top: 4rpx;
}

.tui-tool-text {
  font-size: 24rpx;
}

.tui-order-icon {
  width: 56rpx;
  height: 56rpx;
  display: block;
}

.tui-assets-box {
  height: 178rpx;
  margin-top: 20rpx;
}

.tui-assets-list {
  height: 84rpx;
}

.tui-assets-num {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  position: relative;
}

.tui-assets-text {
  font-size: 24rpx;
  font-weight: 400;
  color: #666;
  padding-top: 6rpx;
}

.tui-tool-box {
  margin-top: 20rpx;
}

.tui-flex-wrap {
  flex-wrap: wrap;
  height: auto;
  padding-bottom: 30rpx;
}

.tui-tool-item {
  width: 25%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-top: 30rpx;
}

.tui-tool-icon {
  width: 64rpx;
  height: 64rpx;
  display: block;
}

.tui-badge-icon {
  width: 66rpx;
  height: 30rpx;
  position: absolute;
  right: 0;
  transform: translateX(88%);
  top: -15rpx;
}

/*为你推荐*/
.tui-product-list {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.tui-product-container {
  flex: 1;
  margin-right: 2%;
}

.tui-product-container:last-child {
  margin-right: 0;
}

.tui-pro-item {
  width: 100%;
  margin-bottom: 4%;
  background: #fff;
  box-sizing: border-box;
  border-radius: 12rpx;
  overflow: hidden;
}

.tui-pro-img {
  width: 100%;
  display: block;
}

.tui-pro-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 20rpx;
}

.tui-pro-tit {
  color: #2e2e2e;
  font-size: 26rpx;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.tui-pro-price {
  padding-top: 18rpx;
}

.tui-sale-price {
  font-size: 34rpx;
  font-weight: 500;
  color: #e41f19;
}

.tui-factory-price {
  font-size: 24rpx;
  color: #a0a0a0;
  text-decoration: line-through;
  padding-left: 12rpx;
}

.tui-pro-pay {
  padding-top: 10rpx;
  font-size: 24rpx;
  color: #656565;
}

.tui-btn-back {
  width: 88rpx;
  height: 88rpx;
  font-size: 26rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  position: fixed;
  bottom: 60rpx;
  right: 30rpx;
  z-index: 9999;
}

.tool-item {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 14rpx 0;
  font-size: 28rpx;
  font-weight: 400;
  .tool-item-icon {
    height: 60rpx;
    padding: 0 14rpx;
    box-sizing: border-box;
    .icon-image {
      width: 60rpx;
      height: 60rpx;
    }
  }
  .tool-item-title {
    font-size: 28rpx;
    font-weight: 400;
  }
}
</style>
